<template>
    <div id="share">

        <mt-header  fixed title="分享" class="header">
            <router-link to="/" slot="left">
            <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>

        <div id="fx">
          <mt-field id="fx_title" class="fx" placeholder="请输入标题" type="text" v-model="fx_title"></mt-field>
          <mt-field id="fx_neirong" placeholder="添加想要分享的内容" type="textarea" row="5" v-model="fx_neirong"></mt-field>
 
          <div class="htxz">话题选择
          <mt-checklist
            id="fx_xz"
            class="xz"
            :max="1"
            v-model="fx_value"
            :options="options">
          </mt-checklist>
          </div>
        </div>
        <mt-button class="fx_tj" id="submit" @click="tijiao2()" type="default" size="large">提交</mt-button>        
    </div>
</template>
<script>
import axios from 'axios'
import {Toast} from 'mint-ui' 
import {mapMutations} from "vuex"
import  {mapState} from "vuex"

export default{
   
    data() {
      return {
        fx_value: [],
        fx_title: "",
        fx_neirong: "",
        username:""
      };
    },
    created() {
      this.options = ['数学', '英语', '网页设计', '视频剪辑'];
    },
    computed: {
            ...mapState({
                btn:state =>state.btn
            })
        },

        mounted(){
            this.getUser();
        },
    methods: {
      ...mapMutations([
                'changeBtn' // 映射 this.increment() 为 this.$store.commit('increment')
            ]),
            
            tijiao2:function(){
              //存入mongo
                var params = new URLSearchParams();
                params.append('fx_title',this.fx_title );
                params.append('fx_neirong',this.fx_neirong );
                params.append('fx_value',this.fx_value );
                params.append('username',this.username );
                var _this = this
                //判断是否登陆
                console.log(_this.username)
                this.$http.post('/users/user').then(function (res) {
                
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('未登录')
                        _this.$router.push({path:'/login/login',query:{username:res.data.username}})
                    } else if (res.data.result == 1) {
                        axios.post('/users/share',params).then(function (res) {
                            if(res.data.result){
                                //成功显示  
                                Toast("success");
                                _this.user=res.data.username;
                                _this.$router.push({path:'/top',query:{username:res.data.username}})
                                _this.changeBtn();

                            }else{
                                alert("404")
                            }
                        }).catch(function (err) {
                            console.log(err);
                        })
                    }
                })
            },
            //获取用户名
           getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        _this.sid = '';
                        _this.ressd = '0';
                        console.log('未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        console.log(_this.username);
                    }
                })
               
            }
        },
}
</script>

<style>
.fx{
    margin-top:40px;
    text-align:center;
}
.htxz{
    margin-top:5px;
    color: #339933;
    font-size: 120%;
    background-color: white;
    position: relative;
}
.xz{
    position: absolute;
    text-align:left;
    left: 35%;
}
.fx_tj{
    margin-top:250px;
    background-color: yellowgreen;
    color:white;
}

</style>